<template>
  <div class="discount-item">
    <el-form
      ref="formRef"
      :inline="true"
      :model="discount"
      class="demo-form-inline form-inline"
      label-position="top"
      size="default"
      :rules="discountRules"
      @keyup.enter="handleDiscountEnter"
      @click.stop
    >
      <!-- 表单字段 -->
      <el-form-item label="承兑人信息" prop="acceptor">
        <el-input ref="firstInput" v-model="discount.acceptor" clearable class="custom-input" />
      </el-form-item>
      <el-form-item label="票面金额(万元)" prop="billAmount">
        <el-input
          v-model="discount.billAmount"
          placeholder=""
          clearable
          style="width: 120px"
          class="custom-input"
          @input="handleInput('billAmount')"
        />
      </el-form-item>
      <el-form-item label="点数" prop="points">
        <el-input
          v-model="discount.points"
          placeholder=""
          clearable
          style="width: 120px"
          class="custom-input"
          @input="handleInput('points')"
        />
      </el-form-item>
      <el-form-item label="张数" prop="open">
        <el-select v-model="discount.open" placeholder="" style="width: 80px">
          <el-option v-for="number in 10" :key="number" :label="number" :value="number" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button v-if="!isEditBoolen" type="primary" @click="$emit('submit', formRef)"
          >添加</el-button
        >
        <el-button v-else type="primary" @click="$emit('edit')">修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, defineEmits, defineExpose } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { inputFormat, dealWith, dealWithEdit } from './utils/from'
const discount = reactive({
  acceptor: '',
  matter: '',
  billAmount: '',
  points: '',
  open: 1
})
interface RuleForm {
  acceptor: string
  billAmount: string
  points: string
  open: string
}

const discountRules = reactive<FormRules<RuleForm>>({
  acceptor: [{ required: true, message: '请输入承兑人信息', trigger: 'blur' }],
  billAmount: [{ required: true, message: '请输入票面金额（万元）', trigger: 'blur' }],
  points: [{ required: true, message: '请输入点数', trigger: 'blur' }],
  open: [
    {
      required: true,
      message: '请选择张数',
      trigger: 'change'
    }
  ]
})
const isEditBoolen = ref(false)

interface DiscountItem {
  serialNumber: number
  matter: string
  acceptor: string
  billAmount: string
  points: string
  open: number
  rebate: string
  interestDeduction: string
  checked?: boolean
}
const formRef = ref<FormInstance>()
const firstInput = ref<HTMLInputElement>()
const item = ref<DiscountItem>({
  serialNumber: 1,
  matter: '',
  acceptor: '',
  billAmount: '',
  points: '',
  open: 1,
  rebate: '',
  interestDeduction: ''
})

const handleInput = (field: string) => {
  discount[field] = inputFormat(discount[field], discount)
}

const emit = defineEmits(['submit', 'edit'])
defineExpose({ focus: () => firstInput.value?.focus() })

const handleDiscountEnter = () => {
  if (isEditBoolen.value) {
    doEdit('discount')
  } else {
    onSubmit(formRef.value, 'discountList')
  }
}

// #region 公共提交方法
const onSubmit = async (formEl: FormInstance | undefined, type: string) => {
  if (!formEl) return

  const result = await dealWith(formEl, type, discount)

  if (result) {
    formEl?.resetFields()
    firstInput.value?.focus()
    emit('submit', result)
  }
}
// #endregion

// #region 公共修改方法
// 列表选中表单修改
const doEdit = async (type: string) => {
  const result = await dealWithEdit(type, discount, item.value)
  isEditBoolen.value = false
  if (result) {
    formRef.value?.resetFields()
    firstInput.value?.focus()
    emit('edit', result)
  }
}
// #endregion
</script>

<style scoped>
.discount-item {
  margin: 12px 0;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}
.custom-input {
  width: 200px;
}
</style>
